@import "tailwindcss";

html {
    scroll-behavior: smooth;
}

/* ===== 主题相关变量 ===== */
:root {
    /* 主题色变量 */
    --primary: #FFEBEE;

    /* 按钮样式变量 */
    --btn-plain-text-hover: #701522;
    --btn-plain-bg-hover: #FFEBEE;
    --btn-plain-bg-active:#FFEBEE;

    /* 下拉菜单样式变量 */
    --dropdown-item-text-hover: #701522;
}

/* 按钮样式 */
.btn-plain { 
    /* 颜色动画 动画设计：150ms 相对定位 flex 布局 子元素垂直居中 水平居中 没有背景色 */
    @apply transition-colors duration-150 relative flex items-center justify-center bg-none
    text-black/75 hover:text-[var(--btn-plain-text-hover)] dark:text-white/75 dark:hover:text-[var(--btn-plain-text-hover)];
    
    /* 没有 scale-animation 时 */
    &:not(.scale-animation) {
        @apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)];
    }

    &.scale-animation {
        /* 
            相对定位 伪元素：ease-out 动画曲线 背景颜色为空  点击后背景颜色为空 背景颜色为 var(--btn-plain-bg-hover) 激活时背景颜色为 var(--btn-plain-bg-active)
            伪元素：绝对定位 继承父元素圆角 让伪元素覆盖整个按钮区域 缩放 0.85  鼠标移入时缩放 100 
        */
        @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
        before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
    }
}

/* 下拉菜单样式 */
.dropdown-container {
    @apply relative;
}

.dropdown-menu {
    @apply absolute top-full left-0 pt-2 opacity-0 invisible pointer-events-none transition-all duration-200 ease-out transform translate-y-[-8px] z-50;
}

.dropdown-container:hover .dropdown-menu,
.dropdown-container:focus-within .dropdown-menu {
    @apply opacity-100 visible pointer-events-auto translate-y-0;
}

.dropdown-container:hover .dropdown-arrow,
.dropdown-container:focus-within .dropdown-arrow {
    @apply rotate-180;
}

.dropdown-content {
    @apply bg-[var(--float-panel-bg)] rounded-[var(--radius-large)] shadow-xl dark:shadow-none border border-black/5 dark:border-white/10 py-2 min-w-[12rem];
}

.dropdown-item {
    @apply flex items-center justify-between px-4 py-2.5 text-black/75 dark:text-white/75 hover:text-[var(--dropdown-item-text-hover)] hover:bg-[var(--btn-plain-bg-hover)] transition-colors duration-150 font-medium;
}